<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>考试试卷查看</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href='<c:url value="/share/bootstrap.css"></c:url>'>
<link rel="stylesheet"
	href='<c:url value="/share/AllStyle.css"></c:url>'>
<script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
<script src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
<script src='<c:url value="/js/all.js"></c:url>'></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<style type="text/css">
html, body {
	background: #e3e8ea;
}

a:hover {
	text-decoration: none;
}

.Examination_list>li {
	width: 100% !important;
	text-align: left;
	padding: 15px;
	margin-bottom: 15px;
	margin-top: 15px;
	border: 1px solid #494949;
}

.Examination_list>li:nth-child(1) {
	margin-top: 0;
}

.Examination_list>li:nth-last-child(1) {
	/* margin-bottom: 0; */
}

.Examination_list_title {
	border: 1px solid #a4a4a4;
	padding: 6px 12px;
	word-break: break-word;
}
.Examination_list_title>font {
	color:#295c96;
	word-wrap: break-word;
}
.Examination_list_title>span {
	background: #295c96;
	color: #fff;
	padding: 3px 6px;
	border-radius: 50%;
}

.Examination_list_content {
	border: 1px solid #a4a4a4;
	padding: 10px 25px;
	margin-top: 10px;
}

.Examination_list_content>li {
	width: 100% !important;
	position: relative;
	overflow: hidden;
	padding: 4px 0;
}

.Examination_list_content>li>input {
	float: left;
	margin-right: 10px;
}

.content_Examination_list_left>ul>li {
	width: auto !important;
	padding: 5px 0px;
	background: #cecece;
	color: #fff;
	margin-bottom: 10px;
	cursor: pointer;
}

.content_Examination_list_left {
	
	margin-top: 20px;
    position: fixed;
    padding: 0;
    width: 100px;

}
.content_Examination_list_center{
	padding: 40px;
    background-color: #fff;
    left: 100px;
    width: 1000px;
}
.jake_Wang_Bg295c96 {
	background: #295c96 !important;
}

.content_Examination_list_right {
	color: #fff;
	margin-top: 20px;
	cursor: pointer;
	position:fixed;
	left:1100px;
}

.Examination_content_details_2 {
	background: #f9f9f9;
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #d7d7d7;
}

.Examination_content_details_2_left {
	text-align: left;
	padding: 15px;
	padding-bottom: 0;
}

.home_content {
	background: #e3e8ea;
}

.maskLayer {
	position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
}

#dialog {
	background-color: #fff;
	width: 380px;
	position: fixed !important; /* 浮动对话框 */
	position: absolute;
	top: 25%;
	left: 50%;
	margin-left: -250px;
	z-index: 11;
	box-shadow: 0 1px 2px grey;
	display: none;
}
/*反馈评分*/
.r {
	padding: 0;
	width: 500px;
	float: left;
	line-height: 35px;
	position: relative;
	overflow: hidden;
	background: #fff;
}

#submit{
			width: 260px;
			background-color: #1e519f;
			font:14px "微软雅黑";
			color: #fff;
			height: 32px;
		}
		.zh5 {
	        float: left ;
	        position: relative;
	       	margin-left:30px;
	        width: 185px;
	        height: 17px;
	        background: url("/eduPlatform/share/images/xing2x.png") 0px 0px no-repeat;
	        
	    }
	    .zh5ul {
	        position: absolute;
	        top: 0;
	        left:0;
	        z-index: 6;
	        width: 185px;
	        height: 17px;
	    }
	    #zh5_red,#zh5_red_2,#zh5_red_3 {
	        position: absolute;
	        top: 0;
	        left: 0;
	        z-index: 5;
	        height: 17px;
	        background: url("/eduPlatform/share/images/xing2x.png") 0px -47px no-repeat;
	    }
	    .zh5ul li{
	        overflow: hidden;
	        float: left;
	        width: 37px;
	        height: 17px;
	        cursor: pointer;
	        line-height: 17em;
	       background-position: 2px -59px;
	    }
	    .r1 {
		    float: left;
		    position: relative;
		    overflow: hidden;
		    background: #fff;
    		left: 66.5px;
    		margin-bottom:32px;
	    }

 .des{
	    	float:left;
	    	color:#575757;
	    	font-size:14px;
	    	margin-top:4px;
	    }

.marginTop15 {
	margin-top: 15px;
}

.marginTop15>span {
	background: #fff;
	color: #000;
}
</style>
</head>
<body style="overflow-x: hidden;">

	<div class="home_content Interface_center" style="position: relative;">
		
		<div class="row" id="paper"
			style="text-align: center; margin-bottom: 40px; position: relative;">
			<div class="col-xs-1 content_Examination_list_left">
				<ul>
					<li id= "oneChoice" class="jake_Wang_Bg295c96">单选题</li>
					<li id= "muchChoice">多选题</li>
					<li id= "judgeChoice">判断题</li>
					<li id= "wenda">问答题</li>
				</ul>
			</div>
			<div class="col-xs-10" style="padding: 40px;background-color: #fff;left:100px;width: 1000px;">
				<div class="Examination_content_details_2 col-xs-12"
					style="background: #fff; padding-top: 25px; position: relative; overflow: hidden; float: left;">
					<div class="Examination_content_details_2_left col-xs-9">
						<div class="Examination_content_details_2_left_title"
							style="margin-bottom: 5px; text-align: left;">
							<span>做题时间：</span><font id="answer_time"></font>
						</div>
						<p style="text-align: left;">
							<input id = "title" type="checkbox" name="checkbox1" value="1" style="float: left;">只看错题
						</p>
					</div>
					<div class="Examination_content_details_2_right"
						style="float: right; width: 70px; border: 1px solid #d7d7d7;">
						<p
							style="margin: 0; background: #eaeaea; color: #4e4e4e; padding: 4px 0;">总分</p>
						<h3 style="margin: 0; padding: 8px 0; color: #e52b2b;" id="sum"></h3>
					</div>
				</div>
				<div id="paperinfo_list_dateils" >
					<ul class="Examination_list col-xs-12" id = "questionType_0" style="position: relative;">
					</ul>
					<ul class="Examination_list col-xs-12" id = "questionType_1" style="position: relative;">
					</ul>
					<ul class="Examination_list col-xs-12" id = "questionType_2" style="position: relative;">
					</ul>
					<ul class="Examination_list col-xs-12" id = "questionType_3" style="position: relative;">
					</ul>
				<!-- <ul id = "questionlist" class="Examination_list col-xs-12" style="position: relative;">
					<li>
						<div class="Examination_list_title">
							<span
								style="background: #295c96; color: #fff; padding: 1px 6px; border-radius: 50%;">1</span>
							<font>Why do you want a new job______you’ve got such a
								good one alrea</font>
						</div>
						<ul class="Examination_list_content">
							<li><input type="radio" name="Radio1"> <font>A、when</font>
							</li>
							<li><input type="radio" name="Radio1"> <font>B、that</font>
							</li>
							<li><input type="radio" name="Radio1"> <font>C、where</font>
							</li>
							<li><input type="radio" name="Radio1"> <font>D、which</font>
							</li>
						</ul>
						<div class="Examination_list_title marginTop15">
							<span>我的答案：<font style="color: #295c96;">A</font></span> <span>参考答案：<font
								style="color: #fa2121;">B</font></span>
						</div>
						<div class="Examination_list_title marginTop15"
							style="position: relative; overflow: hidden;">
							<div
								style="padding: 0; float: left; min-width: 75px; padding: 3px 6px;">试题详解：</div>
							<div style="float: right; text-align: left;"
								class="ks_marginTop15_details">本题是一道基于S3C2410的嵌入式系统开发综合题。考查了数字图像的存储容量计算，网络通信数据传输；系统硬件构件设计，尤其是G</div>
						</div>
					</li>
				</ul> -->
				</div>
			</div>
			<div class="col-xs-1 content_Examination_list_right"
				style="padding: 0; max-width: 54px; position: fixed; margin-top: 20px; position: absolute;padding: 0;left: 1100px; float: none;">
				<img src="<c:url value = "/share/images/pingjia.png"></c:url>"
					style="width: 100%;height: auto;position: fixed;width: 54px;height: 54px;margin-left: -27px;background: #FDA76A !important;">
    
			</div>
		</div>
	</div>

	<div id="_bg" style="width:100%;height:100%">	
		<div id="dialog" style="display: none;">
			
			<button type="button" class="close" onclick="closeBg();" data-dismiss="modal"aria-label="Close" style="margin-right: 5px;"><span aria-hidden="true">×</span></button>
			<div style="position: relative; top: 16px; margin-left: 156px; margin-right: auto; font-size: 16px;color:#535353">考试评价</div>
				<img src="<c:url value='/share/images/pingjiaxian_03.png'/>" style="width: 74%; height: auto; margin-top: 20px; margin-bottom: 20px; position: relative;left:52px;">
			<div class="r1" style="position: relative;">
				<span class="des">试题难度:</span>
				<div class="zh5">
					<ul id="zh5ul" class="zh5ul">
						<li val="1" class=""></li>
						<li val="2" class=""></li>
						<li val="3" class=""></li>
						<li val="4" class=""></li>
						<li val="5" class=""></li>
					</ul>
					<div id="zh5_red" data_star="" class=""></div>
				</div>
			</div>
			<div class="r1" >
				<span class="des" style="float: left; margin-top: 0px;">内容评价:</span>
				<textarea class="" rows="3" id = "evalue" 
					style="border-radius: 3px;  margin-left: 30px; padding: 5px;"
					placeholder="请输入对试题内容的评价..."></textarea>
				
			</div>
			
			<div class="r1">
                	<button type="button" id="submit" class="btn btn-sm login" data-toggle="modal" >提交</button>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	var rootPath = '${rootPath}';
	var userName = '${userName}';
	$(".comment_btn").hide();
	<%--未登录不评价
	if(!userName){
		$(".comment_btn").hide();
	}
	--%>
	$(".ks_marginTop15_details").css({
		width: $(".marginTop15").width() - $(".marginTop15>div").width() - 12+"px"
	});

	$(window).resize(function(){
	   $(".ks_marginTop15_details").css({
			width: $(".marginTop15").width() - $(".marginTop15>div").width() - 12+"px"
		});
	   
	});
	$(".content_Examination_list_left li").click(function  () {
		$(".content_Examination_list_left li").removeClass("jake_Wang_Bg295c96");
		$(this).addClass("jake_Wang_Bg295c96");
		$("#paperinfo_list_dateils>ul").hide();
		$("#paperinfo_list_dateils>ul:eq("+ $(this).index() +")").show();
		if($("#paperinfo_list_dateils>ul:eq("+ $(this).index() +")").html() == ""){
			$(this).hide();
		}
	});
	$(function(){
		$(".content_Examination_list_right").click(function(){
			$("#_bg").addClass("maskLayer");
			$("#dialog").show();
		});
		//可接受度星级评定
	    $("#zh5ul li").each(function(index, element) {
	            var _this = $(this);
	            var nowStar = _this.attr("val");
	            _this.hover(function() {
	                $("#zh5_red").attr("class", "cur" + nowStar);
	            });
	
	            _this.on("click", function() {
	                $("#zh5_red").attr("data_star", nowStar);
	                _this.parent().parent().next().removeClass("error");
	            })
	        });
	
	        $("#zh5ul").on("mouseout", function() {
	            if ($("#zh5_red").attr("data_star")) {
	                $("#zh5_red").attr("class", "cur" + $("#zh5_red").attr("data_star"));
	            } else {
	                $("#zh5_red").removeClass();
	            }
	        });

	});
	function closeBg() {
		$("#fullbg,#dialog").hide();
		$("#_bg").removeClass("maskLayer");
	} 
	//////////////////////////////////
	var rootPath = '${rootPath}';
	var id = '${id}';
	var examId = '${examId}';
	var answer;
	var wrongQuestion="";
	$(function(){
		getInfo();
	})
	function getInfo(){
		var url = rootPath +"/exam/infoData/" + id;
		$.ajax({
			url:url,
			method:"post",
			dataType:"json",
			data:{},
			success:function(data){
				var html = "";
				if(data){
					html += data.answerTime.replace("T"," ") + "-" + data.submitTime.replace("T"," ") + "(" + handTime(data.answerTime, data.submitTime) +")";
					$("#sum").html(data.score);
					answer = data.answer;
					getTestIdList();
				}
				$("#answer_time").html(html);
			},
			error:function(){
				alert("error");
			}
			
		});
	}
	
	function getTestIdList() {
		questionId="";
		var url = rootPath + "/testPaper/testList/" + examId;
		$.ajax({
			url : url,
			method : "post",
			dataType : "html",
			data : {},
			success : function(data) {
				if (data) {
					questionId = data;
					getTestList(questionId);
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				alert("失败！");
			}
		});
	}
	function getTestList(id) {
		var url = rootPath + "/testPaper/questionListData";
		$.ajax({
			url : url,
			method : "post",
			dataType : "json",
			data : {'data':id},
			success : function(data) {
				if (data) {
					showTest(data);
				} else {
					alert("获取信息失败！");
				}
			},
			error : function() {
				alert("失败！");
			}
		});
	}
	function showTest(data) {
		wrongQuestion = "";
		var htmStr0=""; 
		var htmStr1=""; 
		var htmStr2=""; 
		var htmStr3=""; 
		var htmStr="";
		length = data.length;
		var myAnswer; 
		if(answer){
			myAnswer = answer.split("_kahsdkf_fsd!~&*_");
		}
		answer = "";
		var id =0,id1=0,id2=0,id3=0,id4=0;
		for(var i = 0; i < length; i++){
			if(myAnswer[i]=="newjigjfnedl.jl0p"){
				myAnswer[i] ="未做";
			}
			var id = i+1;
			if(myAnswer[i] != data[i].answer){
				if(!wrongQuestion){
					wrongQuestion = data[i].id;
				}else{
					wrongQuestion += "," +data[i].id;
				}
				if(!answer){
					answer = myAnswer[i];
				}else{
					answer += "_kahsdkf_fsd!~&*_" + myAnswer[i];
				} 
			}
			
			if (data[i].class_id == "单选题") {
				id1++;
				htmStr0 +=	"<li><div class=\"Examination_list_title\">"
						+"<span style=\"background: #295c96; color: #fff;padding: 0px 10px;border-radius: 15px 15px 15px 15px;margin-right: 10px;\">"+id1+"</span>"
						+"<font>"+data[i].question+"</font>"
						+"</div>"
						+"<ul class=\"Examination_list_content\">";
				var str = data[i].selects;
				var arr = str.split(",nwebadjj,_");
				for (var j = 0; j < arr.length; j++) {
					var option = String.fromCharCode(j + 65);
					htmStr0 += "<li>"
							+ "<font>" + option + '、' + arr[j] + "</font>"
							+ "</li>";
				}
				htmStr0 +="</ul><div class=\"Examination_list_title marginTop15\">"
				+"<span>我的答案：<font style=\"color: #295c96;\">"+myAnswer[i]+"</font></span> <span>参考答案：<font style=\"color: #fa2121;\">"+data[i].answer+"</font></span>"
				+"</div><div class=\"Examination_list_title marginTop15\" style=\"position: relative; overflow: hidden;\"><div style=\"padding: 0; float: left; min-width: 75px; padding: 3px 6px;\">试题详解：</div>"
				+"<div style=\"float: left; text-align: left;line-height: 26px;\" class=\"ks_marginTop15_details\">"+data[i].detailed+"</div>"
				+"</div>";
				htmStr0 += "</li>";
			}else if (data[i].class_id == "多选题") {
				id2++;
				htmStr1 +=	"<li><div class=\"Examination_list_title\">"
					+"<span style=\"background: #295c96; color: #fff;padding: 0px 10px;border-radius: 15px 15px 15px 15px;margin-right: 10px;\">"+id2+"</span>"
					+"<font>"+data[i].question+"</font>"
				+"</div>"
				+"<ul class=\"Examination_list_content\">";
				var str = data[i].selects;
				var arr = str.split(",nwebadjj,_");
				for (var j = 0; j < arr.length; j++) {
					var option = String.fromCharCode(j + 65);
					htmStr1 += "<li>"
							+ "<font>" + option + '、' + arr[j] + "</font>"
							+ "</li>";
				}
				htmStr1 +="</ul><div class=\"Examination_list_title marginTop15\">"
					+"<span>我的答案：<font style=\"color: #295c96;\">"+myAnswer[i]+"</font></span> <span>参考答案：<font style=\"color: #fa2121;\">"+data[i].answer+"</font></span>"
					+"</div><div class=\"Examination_list_title marginTop15\" style=\"position: relative; overflow: hidden;\"><div style=\"padding: 0; float: left; min-width: 75px; padding: 3px 6px;\">试题详解：</div>"
					+"<div style=\"float: left; text-align: left;line-height: 26px;\" class=\"ks_marginTop15_details\">"+data[i].detailed+"</div>"
					+"</div>";
				htmStr1 += "</li>";
			}else if (data[i].class_id == "判断题") {
				id3++;
				if(data[i].answer == "true"){
					data[i].answer ="是";
					
				}else{
					data[i].answer = "否";
				}	
				if(myAnswer[i] == "true"){
					myAnswer[i] ="是";
				}else if(myAnswer[i] == "false"){
					myAnswer[i] = "否";
				}	
				htmStr2 +=	"<li><div class=\"Examination_list_title\">"
					+"<span style=\"background: #295c96; color: #fff;padding: 0px 10px;border-radius: 15px 15px 15px 15px;margin-right: 10px;\">"+id3+"</span>"
					+"<font>"+data[i].question+"</font>"
				+"</div>"
				+"<ul class=\"Examination_list_content\">";
				htmStr2 += "<li><font>是</font>"
							+ "</li><font>否</font>"
							+ "</li></ul>";
				htmStr2 +="<div class=\"Examination_list_title marginTop15\">"
					+"<span>我的答案：<font style=\"color: #295c96;\">"+myAnswer[i]+"</font></span> <span>参考答案：<font style=\"color: #fa2121;\">"+data[i].answer+"</font></span>"
					+"</div><div class=\"Examination_list_title marginTop15\" style=\"position: relative; overflow: hidden;\"><div style=\"padding: 0; float: left; min-width: 75px; padding: 3px 6px;\">试题详解：</div>"
					+"<div style=\"float: left; text-align: left;line-height: 26px;\" class=\"ks_marginTop15_details\">"+data[i].detailed+"</div>"
					+"</div>";		
				htmStr2 += "</li>";
			}else if (data[i].class_id == "解答题") {
				id4++;
				htmStr3 +=	"<li><div class=\"Examination_list_title\">"
					+"<span style=\"background: #295c96; color: #fff;padding: 0px 10px;border-radius: 15px 15px 15px 15px;margin-right: 10px;\">"+id4+"</span>"
					+"<font>"+data[i].question+"</font>"
				+"</div>";
				
				htmStr3 +="<div class=\"Examination_list_title marginTop15\">"
					+"<div style='padding: 6px;'>我的答案：<font style=\"color: #295c96;\">"+myAnswer[i]+"</font></div> <div style='padding: 6px;'>参考答案：<font style=\"color: #fa2121;\">"+data[i].answer+"</font></div>"
					+"</div><div class=\"Examination_list_title marginTop15\" style=\"position: relative; overflow: hidden;\"><div style=\"padding: 0; float: left; min-width: 75px; padding: 3px 6px;\">试题详解：</div>"
					+"<div style=\"float: left; text-align: left;padding: 3px 6px;\" class=\"ks_marginTop15_details\">"+data[i].detailed+"</div>"
					+"</div>";
				htmStr3 += "</li>";
			}
			
		}
		if(!htmStr0){
			$("#questionType_0").hide();
			$("#oneChoice").hide();
		}
		if(!htmStr1){
			$("#questionType_1").hide();
			$("#muchChoice").hide();
		}
		if(!htmStr2){
			$("#questionType_2").hide();
			$("#judgeChoice").hide();
		}
		if(!htmStr3){
			$("#questionType_3").hide();
			$("#wenda").hide();
		}
		$("#questionType_0").html(htmStr0);
		$("#questionType_1").html(htmStr1);
		$("#questionType_2").html(htmStr2);
		$("#questionType_3").html(htmStr3);
		/* textarea div高度自适应 */
		$.fn.autoHeight = function(){

			function autoHeight(elem){
				elem.style.height = 'auto';
				elem.scrollTop = 0; //防抖动
				elem.style.height = elem.scrollHeight + 'px';
			}
		
			this.each(function(){
				autoHeight(this);
				$(this).on('keyup', function(){
					autoHeight(this);
				});
			});

		}
		$('div[autoHeight]').autoHeight();
		$('textarea[autoHeight]').autoHeight();
	}
	
	$("input[name='checkbox1']").click(function () {     
		var value = $("input[type='checkbox'][name='checkbox1']:checked").val();
		if(!value){
			getInfo();
		}else{
			getTestList(wrongQuestion);
		}
	});
	function handTime(str1,str2){
		var date1= str1.replace("T"," ");  //开始时间  
	    var date2 = str2.replace("T"," ");     //结束时间  
	    var date3 = new Date(date2).getTime() - new Date(date1).getTime();   //时间差的毫秒数        
	    //计算出相差天数  
	    var days=Math.floor(date3/(24*3600*1000))  
	    //计算出小时数  
	    var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数  
	    var hours=Math.floor(leave1/(3600*1000))  
	    //计算相差分钟数  
	    var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数  
	    var minutes=Math.floor(leave2/(60*1000))  
	    //计算相差秒数  
	    var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数  
	    var seconds=Math.round(leave3/1000)  
	    return days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒";  
	}
	var value="";
	var ul = document.getElementById('zh5ul');
	var lis = ul.getElementsByTagName('li');
	for(var i=0;i<lis.length;i++){
	    lis[i].onclick = function(){
	    	value = this.getAttribute("val");
	    }
	}
	$("#submit").click(function(){
		var content = $("#evalue").val();
		if(!content){
			alert("请输入评价内容！");
			return;
		}
		if(!value){
			alert("请评星！");
			return;
		}
		var url = rootPath + "/grade/add/mark";
		$.ajax({
			url:url,
			method:"post",
			dataType:"json",
			data:{
				'typeId':examId,
				'accept':5,
				'acceptCon':content
			},
			success:function(data){
				if(data){
					alert("评价成功！");
					window.close();
				}else{
					
				}
				
			},
			error:function(){}
			
		})
		
	});
	
	</script>
</body>
</html>